// 导入logo图片
import logo from './logo.svg';
// 导入根组件的样式
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
import './App.css';
// 导入分类组件

import Category from './category/index.js'
// 导入购物车组件
import Cart from './cart/index.js'
// 导入支付组件
import Pay from './pay/index.js'
// 导入惊喜组件
import Suprise from './suprise/index.js' 
// 导入地址组件
import Address from './address/index.js'
import Addone from './address/addone.js'
import Addtwo from './address/addtwo.js'
// 导入学员模块
import Student from './views/student/index.js'

// 导入管理员模块
import Admin from './views/admin/index.js'
// 根组件
// react的渲染语法  {表达式，变量，运算，三目}
// react的class 在jsx语法中写成 className=""
import PayOne from './pay/payone.js'
import PayTwo from './pay/paytwo.js'
function App() {
  return (
  // react路由的配置项
  	<Router>
		<div className="App">
			<div className="navlist">
			<ul>
				<li>
					<Link to='cate'>分类</Link>
				</li>
				<li>
					<Link to='cart'>购物车</Link>
				</li>
				<li>
					<Link to='pay'>支付组件</Link>
				</li>
				<li>
					<Link to='suprise'>惊喜组件</Link>
				</li>
				<li>
					<Link to='stu'>学员组件</Link>
				</li>
				<li>
					<Link to='admin'>管理员模块</Link>
				</li>
				<li>
					<Link to='address'>地址组件</Link>
				</li>
			</ul>	
		</div>	
			<Routes>
				<Route path="/cate"   element={<Category /> } />
				<Route path="/cart"   element={<Cart /> } />
				<Route path="/pay"    element={<Pay />}    />
				<Route path="/suprise" element={<Suprise />}  />
				<Route path="/address" element={<Address />} >
					<Route path="addone" element={<Addone />} />
					<Route path="addtwo" element={<Addtwo />}  />
				</Route>
				<Route  path="/stu" element={<Student />}  />
				<Route path="/admin" element={<Admin />} />
			</Routes>
		  </div>		
		</Router>
  
  );
}

export default App;
/*

	   <Pay one={ <PayOne/> } two={<PayTwo />} />
       <Cart  money="1000亿"  / >
	   <Category  city="哈尔滨" province="黑龙江" />
	   <Category  city="长春" province="吉林" />
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
       </header>

*/